<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画报 - 果果街</title>
<%@include file="../common/css.jsp" %>
<%@include file="../common/js.jsp" %>
<link href="css/v3/huabao/huabao.css" type="text/css" rel="stylesheet" />
</head>
<body>
<%@include file="../common/header.jsp" %>

<!-- content-->
<div class="w100p">
	<!--adOne-->
	<c:if test="${fn:length(topAdv) > 0}">
		<div class="w980 mg mb15 clearfix">
			<c:forEach items="${topAdv}" var="top">
        		<a target="_blank" href="${top.hyperlink}" class="fl block"><img height="61" src="${top.picture}" class="block r5" alt="${top.title}" /></a>
        	</c:forEach>
	    </div>
	</c:if>
	
    <!--adOne--end-->
    <!-- huabaosorts_v3-->
    <div class="w980 mg mb20">
    	<div class="boxhead_v3 w970 mg pr h5">
        	<span class="lt"></span>
            <span class="rt"></span>	
        </div>
        <div class="wrap_v3 clearfix">
            <ul class="sorts_v3 fl">
            	<c:forEach items="${picTypeList}" var="picType">
            		<li class="fl">
	                	<a target="_blank" href="${picType.hyperlink}" class="block"><img src="${picType.picture}" class="block" /></a>
	                    <a target="_blank" href="${picType.hyperlink}" class="tip_v3">${picType.title}</a>
	                </li>
            	</c:forEach>
            </ul>
            <div class="fl mt30 ml50 share_v3">
            	<c:if test="${sessionScope.member != null}">
            		<a target="_blank" href="createPictorial.htm">马上分享</a>
				</c:if> <c:if test="${sessionScope.member == null}">
					<a href="javascript:void(0);" onclick='GUOGUO.memberLogin()'>马上分享</a>
				</c:if>
            	
                <span class="block fc9 tc mt10">收藏和分享各种<br />属于你的风格的商品和图片</span>
            </div>
        </div>
        <div class="boxfoot_v3 w970 mg pr h5">
        	<span class="lb"></span>
            <span class="rb"></span>	
        </div>
    </div>
    <!-- huabaosorts_v3--end-->
    
    <!-- selectOption-->
    <div class="w980 mg mb20">
    	<div class="ml5 clearfix choice_v3">
        	<h3 class="fl ff6699">画报</h3>
            <div class="fl ml25 mt5 clearfix">
            	<span class="fl f14">排序：</span>
                <ul class="showchoice_v3 fl r3 clearfix">
                	<li class="fl"><a href="hotPictorial.htm" 
                	<c:choose>
                		<c:when test="${type=='new'}">
                			class="block tip_v3li fl"
                		</c:when>
                		<c:otherwise>
                			class="block tip_v3li fl ff6699 fb"
                		</c:otherwise>
                	</c:choose>
                	 id="tj">推荐</a></li>
                    <li class="nobgpad_v3 fl"></li>
                    <li class="fl"><a href="hotPictorial.htm?type=new"
                    <c:choose>
						<c:when test="${type=='new'}">
                			class="block tip_v3li fl ff6699 fb"
                		</c:when>
                		<c:otherwise>
                			class="block tip_v3li fl"
                		</c:otherwise>
                	</c:choose>
					 id="new">最新</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- selectOption--end-->
    
    <!-- cpshow-->
    <div class="w980 mg mb10" id="cpshow">
    	<div class="cpshowwrap_v3 fl w920">
    		<c:forEach items="${pageModel.list }" var="pictorial" begin="0" end="2">
	        	<div class="cpwrap_v3 w220 mr10 mb10 fl">
	            	<div class="boxhead_v3 w210 mg pr h5">
	                    <span class="lt"></span>
	                    <span class="rt"></span>	
	        		</div>
	                <div class="cpbody_v3">
	                    <div class="cppic_v3">
	                        <div class="mt5 mb5">
	                            <ul class="ml10 bigpic_v3">
	                                <li>
	                                	<a target="_blank" href="picdt.htm?id=${pictorial.identifier }">
											<img src="${pictorial.picList4[0].picUrl }_200xXXX.jpg" height="${pictorial.picList4[0].picHeight }" width="${pictorial.picList4[0].picWidth}" alt="${pictorial.title }"/>
										</a>
	                                </li>
	                            </ul>
	                            <ul class="smallpic_v3 clearfix ml10">
	                            	<c:forEach items="${pictorial.picList4}" var="doingPictorial" begin="1">
	                            		<li class="fl">
										<a target="_blank" class="block"
											href="picdt.htm?id=${pictorial.identifier }">
											<img src="${doingPictorial.picUrl}_100x100.jpg" width="64" class="block" alt="${pictorial.title }"
											height="64" /> </a>
										</li>
									</c:forEach>
									<c:forEach begin="${fn:length(pictorial.picList4)}" end="3">
										<li class="fl nopic_v3"></li>
									</c:forEach>
	                            </ul>
	                            <p class="mt10 mb10 f14 lh120 ml10 fc6">${pictorial.title}</p>
	                        </div>
	                    </div>
	                    <div class="cpinfo_v3">
	                    	<div class="mt10 mr5 ml10 mb10">
	                        	<div class="mb10 clearfix">
	                                <a href="cover.htm?fid=${pictorial.family}" target="_blank" class="pic_v3 block fl mr5" nickname="${pictorial.nickname}"><img src="${pictorial.imageServer }${pictorial.avatar }" width="26" height="26" class="block" /></a>
	                                <div class="fl">
	                                    <a href="cover.htm?fid=${pictorial.family}" target="_blank" class="ff6699 name_v3" nickname="${pictorial.nickname}">${pictorial.nickname }</a>
	                                    <div class="clearfix">
	                                    	<span class="fl mr10"><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9">围观</a><i class="fc9">(</i><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9 unl">${pictorial.viewAmount}</a><i class="fc9">)</i></span>
	                                		<span class="fl"><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9">评论</a><i class="fc9">(</i><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9 unl">${pictorial.commentCount}</a><i class="fc9">)</i></span>
	                                		
	                            		</div>
	                                </div>
	                            </div>
	                            <c:if test="${fn:length(pictorial.pictorialTopicList) > 0}">
		                            <div class="clearfix">
		                            	<span class="fc9 fl">主题：</span>
		                            	<c:forEach items="${pictorial.pictorialTopicList}" var="pictorialTopic">
											<a target="_blank"
												href="picTopicDetail.htm?tid=${pictorialTopic.identifier}"
												class="mr5 lh120"><c:out value="${pictorialTopic.name}" />
											</a>
										</c:forEach>
		                            </div>
	                            </c:if>
	                        </div>
	                    </div>
	                </div>
	                <div class="boxfoot_v3 w210 mg pr h5">
	        			<span class="lb"></span>
	            		<span class="rb"></span>	
	       			 </div>
	            </div>
            </c:forEach>

            <div class="cpwrap_v3 w220 mr10 mb10 fl">
            	<div class="boxhead_v3 w210 mg pr h5">
                    <span class="lt"></span>
                    <span class="rt"></span>	
        		</div>
                <div class="cpbody_v3">
                    <div class="cppic_v3">
                    	<div class="mt10 ml10 mr10 mb10">
                    		<c:forEach items="${postList}" var="pt" begin="0" end="0">
                    			<h3 class="f14 ff6699 fn">最热主题活动</h3>
	                            <div class="mt15 newzt_v3">
	                            	<h3 class="fn"><a href="javascript:;" class="f14">${pt.title}</a></h3>
	                                <p>${pt.description}</p>
	                                <%-- <div class="fc9"><span>画报</span><i>(</i>${pt.nickname}<i>)</i><span class="ml10">围观</span><i>(</i>${pt.systemTag}<i>)</i></div> --%>
	                                <ul class="smallpic_v3 mt5 clearfix">
	                                    <li class="fl">
	                                        <a href="javascript:;" class="block"><img src="${pt.picture}" class="block" height="48"/></a>
	                                    </li>
	                               </ul>
	                            </div>
                    		</c:forEach>
                    		
                            <div class="mt10 otherinfo_v3">
                            	<c:forEach items="${postList}" var="pt" begin="1" end="4">
                            		<div class="clearfix mb10">
                                	<span class="ff6699 fl">【${pt.title}】</span><a href="${pt.hyperlink}" class="fl title_v3">${pt.description}</a>
                                </div>
                            	</c:forEach>
                            </div>
                      	</div>
                    </div>
                    <div class="cpinfo_v3 clearfix">
                    	<a href="${postList[0].hyperlink}" class="golook_v3 fr white">去看看</a>	
                    </div>
                </div>
                <div class="boxfoot_v3 w210 mg pr h5">
        			<span class="lb"></span>
            		<span class="rb"></span>	
       			 </div>
            </div>
            
            <c:forEach items="${pageModel.list}" var="pictorial" begin="3">
	        	<div class="cpwrap_v3 w220 mr10 mb10 fl">
	            	<div class="boxhead_v3 w210 mg pr h5">
	                    <span class="lt"></span>
	                    <span class="rt"></span>	
	        		</div>
	                <div class="cpbody_v3">
	                    <div class="cppic_v3">
	                        <div class="mt5 mb5">
	                            <ul class="ml10">
	                                <li>
	                                	<a target="_blank" href="picdt.htm?id=${pictorial.identifier }">
											<img src="${pictorial.picList4[0].picUrl }_200xXXX.jpg" height="${pictorial.picList4[0].picHeight}" width="${pictorial.picList4[0].picWidth}" alt="${pictorial.title }"/>
										</a>
	                                </li>
	                            </ul>
	                            <ul class="smallpic_v3 mt5 clearfix ml10">
	                            	<c:forEach items="${pictorial.picList4}" var="doingPictorial" begin="1">
	                            		<li class="fl">
										<a target="_blank" class="block"
											href="picdt.htm?id=${pictorial.identifier }">
											<img src="${doingPictorial.picUrl}_100x100.jpg" width="64" class="block" alt="${pictorial.title }"
											height="64" /> </a>
										</li>
									</c:forEach>
									<c:forEach begin="${fn:length(pictorial.picList4)}" end="3">
										<li class="fl nopic_v3"></li>
									</c:forEach>
	                            </ul>
	                            <p class="mt10 mb10 f14 lh120 ml10 fc6">${pictorial.title}</p>
	                        </div>
	                    </div>
	                    <div class="cpinfo_v3">
	                    	<div class="mt10 mr5 ml10 mb10">
	                        	<div class="mb10 clearfix">
	                                <a href="cover.htm?fid=${pictorial.family}" target="_blank" class="pic_v3 block fl mr5" nickname="${pictorial.nickname}"><img src="${pictorial.imageServer }${pictorial.avatar }" width="26" height="26" class="block" /></a>
	                                <div class="fl">
	                                    <a href="cover.htm?fid=${pictorial.family}" target="_blank" class="ff6699 name_v3" nickname="${pictorial.nickname}">${pictorial.nickname }</a>
	                                    <div class="clearfix">
	                                    	<span class="fl mr10"><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9">围观</a><i class="fc9">(</i><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9 unl">${pictorial.viewAmount}</a><i class="fc9">)</i></span>
	                                		<span class="fl"><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9">评论</a><i class="fc9">(</i><a target="_blank" href="picdt.htm?id=${pictorial.identifier}" class="fc9 unl">${pictorial.commentCount}</a><i class="fc9">)</i></span>
	                                	</div>
	                                </div>
	                            </div>
	                            <c:if test="${fn:length(pictorial.pictorialTopicList) > 0}">
		                            <div class="clearfix">
		                            	<span class="fc9 fl">主题：</span>
		                            	<c:forEach items="${pictorial.pictorialTopicList}" var="pictorialTopic">
											<a target="_blank"
												href="picTopicDetail.htm?tid=${pictorialTopic.identifier}"
												class="mr5 lh120"><c:out value="${pictorialTopic.name}" />
											</a>
										</c:forEach>
		                            </div>
	                            </c:if>
	                        </div>
	                    </div>
	                </div>
	                <div class="boxfoot_v3 w210 mg pr h5">
	        			<span class="lb"></span>
	            		<span class="rb"></span>	
	       			 </div>
	            </div>
            </c:forEach>
           
        </div>
         <div class="clear"></div>
         <!-- fanye_v3-->
	   <div id="pager" class="h_page"></div>
	    <!-- fanye_v3--end-->
    </div>
    <!-- cpshow--end-->
    
    
</div>
<!-- content--end-->

<!-- back_v3-->
<div class="w100p" id="redSlide">
	<div class="w980 mg">
        <div class="back_v3">
            <a href="javascript:void(0)" class="backtop_v3"></a>
            <a href="javascript:void(0)" class="buyinfo_v3"></a>        
        </div>
    </div>
</div>
<!-- back_v3--end-->
<div class="clear"></div>

<%@include file="../common/footer.jsp" %>
<script type="text/javascript" src="js/web2/familyTip.js"></script>
<script type="text/javascript" src="js/v3/other/interfacejs.js"></script>
<script type="text/javascript" src="js/v3/other/huabaojs.js"></script>
<script type="text/javascript">
	$(function() {
		
		//分页方法
		$("#pager").pager({
			pagenumber : "${pageModel.currentPage}",
			pagecount : "${pageModel.totalPage}",
			buttonClickCallback : function(page) {
				var url = "hotPictorial.htm?page="+page;
				if(!IsNull('${type}')){
					url = url + "&type=${type}";
				}
				location.href = url;
			}
		});
		
		//图片加载完之后给div赋值样式
		$('.cpshowwrap_v3').masonry({
			itemSelector : '.cpwrap_v3'
		});
		
		
		
	});
	
	
	
</script>

</body>
</html>
